@import "../common/mixin.scss";
@import "../common/var.scss";
.settings-warp {
    min-height: 562px;
    // 左侧控制台
    .panel {
        width: 160px;
        background-color: #fff;
        .section {
            line-height: 1;
            padding: 25px 24px;
            dt {
                font-size: 14px;
                color: #333;
                font-weight: bold;
                padding-bottom: 18px;
                display: flex;
                em {
                    margin-right: 2px;
                }
            }
            dd {
                font-size: 12px;
                color: #666;
                padding-bottom: 18px;
                padding-left: 17px;
                a {
                    color: #666;
                    transition: all .25s;
                    &.cur {
                        color: #ff425e;
                    }
                    &:hover {
                        color: #ff425e;
                    }
                }
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
    }
    // 右侧主体
    .main {
        width: 1030px;
        .tabNav {
            display: flex;
            height: 50px;
            font-size: 16px;
            padding: 0 20px;
            color: #e8e8e8;
            background-color: #fff;
            align-items: center;
            span {
                color: #333;
                width: 132px;
                height: 100%;
                line-height: 50px;
                position: relative;
                text-align: center;
                cursor: pointer;
                &.cur {
                    &:after {
                        content: "";
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        height: 2px;
                        background-color: #ff0036;
                    }
                }
            }
        }
        .topNav {
            height: 55px;
            font-size: 16px;
            color: #333;
            display: flex;
            align-items: center;
            padding: 0 20px;
            background-color: #fff;
            span {
                cursor: pointer;
            }
            button {
                height: 32px;
                padding: 0 8px;
                color: #fff;
                font-size: 14px;
                border: 0;
                cursor: pointer;
                margin-top: 13px;
                background-color: #ff0036;
            }
        }
        .content-wrap {
            margin-top: 10px;
            background-color: #fff;
        }
        // 头像
        .avatar-wrap {
            height: 224px;
            margin-left: 63px;
            border-bottom: 1px solid #eaeaea;
            .avatar {
                position: relative;
                width: 126px;
                top: 64px;
            }
            .edit-wrap {
                width: 100%;
                height: 126px;
                border-radius: 50%;
                border: 2px solid #e6e6e6;
                position: relative;
                overflow: hidden;
                cursor: pointer;
                input{
                    z-index: 100;
                }
                img {
                    display: block;
                    width: 100%;
                    top: 0;
                    position: absolute;
                    z-index: 1;
                }
                .edit {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    font-size: 12px;
                    color: #fff;
                    width: 126px;
                    height: 25px;
                    display: block;
                    text-align: center;
                    background-color: rgba(0, 0, 0, .7);
                    z-index: 101;
                }
            }
            .level {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #ff0036;
                color: #fff;
                font-size: 12px;
                position: absolute;
                top: 12px;
                right: 0;
                text-align: center;
                line-height: 20px;
                font-style: normal;
                z-index: 102;
            }
        }
        // 基础信息
        .baseInfo-wrap {
            font-size: 12px;
            color: #333;
            padding: 28px 100px 40px 100px;
            .name {
                width: 64px;
                text-align: right;
                display: block;
            }
            .sex {
                display: flex;
                line-height: 1;
                padding-bottom: 30px;
                label {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                }
                .radio {
                    margin-right: 20px;
                }
            }
            .level {
                display: flex;
                align-items: center;
                line-height: 1;
                padding-bottom: 30px;
            }
            .save {
                width: 50px;
                height: 28px;
                border: 0;
                appearance: none;
                color: #fff;
                background-color: #ff0036;
                cursor: pointer;
            }
        }
        //账户安全
        .accSecurity-wrap {
            padding: 40px 20px;
            .section {
                display: flex;
                height: 88px;
                border: 1px solid #dfdfdf;
                align-items: center;
                margin-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                }
                .icons {
                    margin-left: 19px;
                }
                .txt {
                    display: flex;
                    flex-direction: column;
                    font-size: 12px;
                    padding-left: 20px;
                    span {
                        line-height: 1;
                        color: #898989;
                        &:first-child {
                            color: #333333;
                            padding-bottom: 6px;
                        }
                    }
                }
                .btns {
                    width: 161px;
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    span {
                        margin-right: 103px;
                        cursor: pointer;
                        font-size: 12px;
                        color: #2d59ca;
                    }
                    button {
                        width: 92px;
                        height: 28px;
                        appearance: none;
                        border: 0;
                        background-color: #ff0036;
                        color: #fff;
                        cursor: pointer;
                        margin-right: 69px;
                    }
                }
            }
        }
        // 账户表单提交
        .accForm-wrap {
            padding: 50px 40px 60px 40px;
            .cell-title {
                font-size: 12px;
                color: #898989;
                height: 32px;
                line-height: 32px;
                margin-bottom: 20px;
                width: 180px;
                text-align: right;
            }
            .cell {
                display: flex;
                height: 32px;
                align-items: center;
                margin-bottom: 20px;
                font-size: 12px;
                color: #333333;
                .title {
                    width: 150px;
                    text-align: right;
                    margin-right: 10px;
                }
            }
            .input-area {
                display: flex;
                input {
                    height: 30px;
                    border: 1px solid #e6e6e6;
                    padding: 0 5px;
                    width: 205px;
                    &.verCode {
                        width: 78px;
                    }
                }
                .button {
                    color: #333333;
                    border: 1px solid #e6e6e6;
                    width: 110px;
                    height: 30px;
                    background-color: #f5f5f5;
                    display: block;
                    line-height: 30px;
                    text-align: center;
                    cursor: pointer;
                    margin-left: 5px;
                }
            }
            .submit-btn {
                padding: 0 12px;
                height: 28px;
                text-align: center;
                line-height: 28px;
                background-color: #ff0036;
                color: #fff;
                cursor: pointer;
            }
        }
        //新增收货地址
        .address-wrap {
            padding: 17px 20px 20px 20px;
            .section {
                padding: 16px 19px 19px 19px;
                border: 1px solid #dfdfdf;
                line-height: 1;
                position: relative;
                margin-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                }
                .close {
                    position: absolute;
                    top: 9px;
                    right: 9px;
                    cursor: pointer;
                }
                .edit {
                    position: absolute;
                    right: 34px;
                    bottom: 19px;
                    span {
                        font-size: 12px;
                        color: #2d59ca;
                        padding: 0 5px;
                        cursor: pointer;
                    }
                }
                .top {
                    display: flex;
                    align-items: center;
                    padding-bottom: 18px;
                    h1 {
                        font-weight: normal;
                        font-size: 16px;
                        color: #333;
                    }
                    .tag {
                        width: 60px;
                        height: 16px;
                        border: 1px solid #ff5c7d;
                        background-color: #ffeeee;
                        color: #ff5175;
                        text-align: center;
                        line-height: 16px;
                        margin-left: 15px;
                        font-size: 12px;
                    }
                }
                .txt {
                    font-size: 12px;
                    padding-bottom: 10px;
                    display: flex;
                    &:last-child {
                        padding-bottom: 0;
                    }
                    .key {
                        width: 60px;
                        text-align: right;
                        color: #898989;
                    }
                    .val {
                        color: #333;
                        display: block;
                    }
                }
            }
        }
        // 新增发票地址
        .invoice-wrap {
            padding: 17px 20px 20px 20px;
            .section {
                padding: 16px 19px 19px 19px;
                border: 1px solid #dfdfdf;
                line-height: 1;
                position: relative;
                margin-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                }
                .close {
                    position: absolute;
                    top: 9px;
                    right: 9px;
                    cursor: pointer;
                }
                .edit {
                    position: absolute;
                    right: 34px;
                    bottom: 19px;
                    span {
                        font-size: 12px;
                        color: #2d59ca;
                        padding: 0 5px;
                        cursor: pointer;
                    }
                }
                .top {
                    display: flex;
                    align-items: center;
                    padding-bottom: 10px;
                    h1 {
                        font-weight: bold;
                        font-size: 16px;
                        color: #333;
                    }
                    .tag {
                        width: 60px;
                        height: 16px;
                        border: 1px solid #ff5c7d;
                        background-color: #ffeeee;
                        color: #ff5175;
                        text-align: center;
                        line-height: 16px;
                        margin-left: 40px;
                        font-size: 12px;
                    }
                }
                .txt-hd {
                    font-size: 16px;
                    color: #333;
                    font-weight: normal;
                    padding-bottom: 10px;
                }
                .txt {
                    font-size: 12px;
                    padding-bottom: 10px;
                    display: flex;
                    &:last-child {
                        padding-bottom: 0;
                    }
                    .key {
                        width: 142px;
                        text-align: right;
                        color: #898989;
                    }
                    .val {
                        color: #333;
                        display: block;
                    }
                }
            }
        }
        // 银行卡
        .bankcard-wrap {
            display: flex;
            padding: 20px 20px 66px 20px;
            .section {
                width: 278px;
                height: 135px;
                border: 1px solid #dfdfdf;
                cursor: pointer;
                margin-right: 20px;
                margin-bottom: 20px;
                .hd {
                    height: 60px;
                    border-bottom: 1px solid #dfdfdf;
                    display: flex;
                    align-items: center;
                }
                .hd-logo {
                    max-width: 180px;
                    margin-left: 20px;
                    img {
                        width: 100%;
                        display: block;
                        max-height: 36px;
                    }
                }
                .hd-num {
                    flex: 1;
                    font-size: 12px;
                    color: #333333;
                    text-align: right;
                    margin-right: 10px;
                }
                .bd {
                    display: flex;
                    align-items: center;
                    height: 74px;
                }
                .txt {
                    font-size: 12px;
                    padding-bottom: 10px;
                    color: #333;
                    display: flex;
                    padding-left: 18px;
                    &:last-child {
                        padding-bottom: 0;
                    }
                    .key {
                        text-align: right;
                    }
                    .val {
                        display: block;
                    }
                }
            }
            .addCard {
                width: 278px;
                height: 135px;
                border: 1px solid #ff7f9a;
                color: #ff7f9a;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                span {
                    line-height: 1;
                    padding-top: 10px;
                }
            }
        }
        // 关于我们
        .about-wrap {
            padding: 16px 20px 44px 20px;
            p {
                font-size: 12px;
                line-height: 20px;
                padding-bottom: 20px;
            }
        }
        // 联系我们
        .aboutConcat-wrap {
            padding: 27px 20px 130px 20px;
            .concat {
                padding-bottom: 18px;
                p {
                    font-size: 14px;
                    line-height: 20px;
                    padding-bottom: 6px;
                }
            }
        }
        // 系统通知
        .sysMsg-wrap {
            padding: 0 20px;
            background-color: #fff;
            .item {
                padding: 20px 0;
                border-bottom: 1px solid #dfdfdf;
                &:first-child {
                    border-top: 1px solid #dfdfdf;
                }
                .hd {
                    display: flex;
                    align-items: center;
                    line-height: 1;
                    padding-bottom: 16px;
                    position: relative;
                    .msgDot {
                        width: 6px;
                        height: 6px;
                        background-color: #ff0036;
                        border-radius: 50%;
                        position: absolute;
                    }
                    .txt {
                        font-size: 14px;
                        color: #333;
                        padding-left: 20px;
                    }
                }
                .bd {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    padding-left: 20px;
                    position: relative;
                    .img {
                        width: 80px;
                        height: 80px;
                        flex-shrink: 0;
                        margin-right: 10px;
                        img {
                            width: 100%;
                            height: 100%;
                            display: block;
                        }
                    }
                    .msg {
                        color: #898989;
                        max-width: 380px;
                        overflow: hidden;
                        white-space: nowrap;
                        word-break: break-all;
                    }
                    .time {
                        color: #898989;
                        left: 500px;
                        position: absolute;
                    }
                    .btn {
                        color: #333333;
                        cursor: pointer;
                        position: absolute;
                        right: 104px;
                    }
                }
            }
        }
    }
}